<template>
<!-- 用到了 -->

<!-- 用户列表页 -->
<!-- <div style="padding: 10px" id="building"> -->
  <div  style="padding: 10px">
  <!-- <div style="margin: 10px 0" > -->
  <div  style="margin: 10px 0">
      <!-- #v-if="user.role === 1" -->
       <el-form :inline="true">
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入用户id" style="width: 200px;" ></el-input>
      </el-form-item>
     <el-button type="primary" icon="el-icon-search" @click="page()">查询</el-button>
      <el-button type="primary" @click="resetData()">清空</el-button>

      <el-button type="primary" @click="add" v-if="this.role==1">新增用户</el-button>
      </el-form>
    </div>
    <el-table
        :data="tableData"
       
        style="width: 100%"
        row-key="id"
       
    >
    <el-table-column
          prop="id"
          label="id">
      </el-table-column>
    <el-table-column
          prop="userAccount"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="passWord"
          label="密码">
      </el-table-column>
     <el-table-column
          prop="root"
          label="权限">
        <template #default="scope">
          <span v-if="scope.row.root == 1">管理员</span>
          <span v-if="scope.row.root == 2">普通用户</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row)" v-if="this.role==1">编辑</el-button>
           <!-- <el-button size="mini" @click="handleDelete(scope.row)" >删除</el-button> -->
            <!-- <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)" >
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>

    
      <el-dialog title="提示" v-model="dialogVisible" width="30%"  customClass="my-info-dialog">
        <el-form :model="form" label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="form.userAccount" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.passWord" style="width: 80%"></el-input>
          </el-form-item>
         <el-form-item label="权限">
        <el-select v-model="form.root" placeholder="请选权限" >
          <el-option
            v-for="item in StatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
          <!-- <el-form-item label="出版时间">
            <el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" clearable></el-date-picker>
          </el-form-item> -->
          
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>

      

  </div>
</template>
<script>
import axios from 'axios'

export default {
  name:'Category',
   data() {
    return {
      bg: {
        backgroundImage: "url(" + require("@/assets/44.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      user: {},
      loading: true,
      form: {},
      role:sessionStorage.getItem('role'),
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      keyword:'',
      tableData: 
        [
          {id:'1',userAccount:'1',passWord:'123',root:1},
         {id:'2',userAccount:'1',passWord:'123',root:2},
        ],
        StatusList: [
        {
          label: '管理员',
          value: 1
        },
        {
          label: '普通用户',
          value: 2
        }
      ],
      ids: []
    }
  },
  created(){
       this.load()
    },

    methods:{
    //弹出添加用户对话框
    add() {
      this.dialogVisible = true
      this.form = {}
    },
    //添加用户接口调用
    save() {


       if (this.form.id) {  // 更新

          // 新增
      axios({
         method:"put",
        //  url:"http://uchiha.vip:5000/User/?id="+this.form.id,
         url:"/User/?id="+this.form.id,

         data:this.form
      }).then(res=>{
        console.log(res)
         this.$message({
              type: "success",
              message: "修改成功"
          })
         this.load() // 刷新表格的数据
        this.dialogVisible = false  // 关闭弹窗
      })

        // request.put("/category", this.form).then(res => {
        //   console.log(res)
        //   if (res.code === '0') {
        //     this.$message({
        //       type: "success",
        //       message: "更新成功"
        //     })
        //   } else {
        //     this.$message({
        //       type: "error",
        //       message: res.msg
        //     })
        //   }
        //   this.load() // 刷新表格的数据
        //   this.dialogVisible = false  // 关闭弹窗
        // })
      } 

      else{

         // 新增
      axios({
         method:"POST",
        //  url:"http://uchiha.vip:5000/User/",
         url:"/User/",
         data:this.form
      }).then(res=>{
        console.log(res)
         this.$message({
              type: "success",
              message: "新增成功"
          })
         this.load() // 刷新表格的数据
        this.dialogVisible = false  // 关闭弹窗
      })
      }
     
        
      
    },
    //用户列表
    load(){
       const _this=this;
        var qs = require('qs');
        axios({
            method:"get",
            // url:"http://uchiha.vip:5000/allUser",
            url:"/allUser",
            // data:qs.stringify({size:5,page:1,sort:"id",asc:"asc"}),
            // data:{size:5,page:1,sort:"id",asc:"asc"},
            // headers:
            // {
            //   "Authorization":　sessionStorage.getItem("token")
            // }
            
        }).then(function (resp){
            console.log(resp.data.data)
            _this.tableData=resp.data.data
        })
    },

     handleEdit(row) {
       console.log(row.id)
       this.form=row
     // this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },

    page() {
      // if(this.keyword.val()==''){
      //   this.load()
      //   console.log(1111)
      //   return
      // }
      // if($('#testmy').val()==''){
      //     this.load()
      //   console.log(1111)
      //   return
      // }
      console.log(222)
     this.selectdata();
    },

    selectdata(){
       const _this = this;
       axios({
        // url:"http://uchiha.vip:5000/User/?id=" +this.keyword,
        url:"/User/?id=" +this.keyword,

        method: "get"
      }).then(function(res) {
        _this.tableData = res.data.data;
       
      });
    },

     resetData() {
      //清空的方法
      //表单输入项数据清空
      this.keyword = '';
      // this.page()
      this.load();
    },

    handleDelete(id) {
      console.log(id)

      // request.delete("/category/" + id).then(res => {
      //   if (res.code === '0') {
      //     this.$message({
      //       type: "success",
      //       message: "删除成功"
      //     })
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.msg
      //     })
      //   }
      //   this.load()  // 删除之后重新加载表格的数据
      // })


        const _this=this
     
    axios({
            method:"delete",
            // url: "http://uchiha.vip:5000/User/?id=" +id,
            url: "/User/?id=" +id,
            // data:{},
            // headers:
            // {
            //   "Authorization":sessionStorage.getItem("token")
            // }
            
        }).then(function (resp){
            console.log(resp)
           // _this.$message('这是一条消息提示');
             _this.$message({
            type: "success",
            message: "删除成功"
          })
          _this.load() // 刷新表格的数据
        })

    },

  }
  
}
</script>
<style >
 
/* background-color: #ecf5ff; */

/* --el-dialog-background-color: #f4f4f5; */

 /*标题背景色*/
  .my-info-dialog .el-dialog__header  {
    background-color: #fdf6ec;
  }
  /*body背景色*/
  .my-info-dialog .el-dialog__body  {
    background-color: #fdf6ec;
  }
   .my-info-dialog .el-dialog__footer  {
    background-color: #fdf6ec;
  }
/*  element ui dialog样式
https://blog.csdn.net/qq_37167049/article/details/92089552 */ 
</style>

